<template>
  <div>
    <el-card style="min-height:80vh; padding-bottom: 10px;">
    <div style="margin-left: 20px;margin-top: 20px;">
      <el-select :size="size" v-model="classId" placeholder="请选择班级" clearable>
        <el-option v-for="bj in bjs" :key="bj.id" :label="bj.name" :value="bj.id"></el-option>
      </el-select>
    </div>
    <my-table :fileButt="fileButt" ref="student" v-if="tableVisible" :size="size" path="student/" :cols="cols" :formObj="form"
      :rules="rules" :tableAttrs="tableAttr" :urlParam="urlParam">
      <template v-slot:form>
        <el-form-item label="姓名" prop="name" >
          <el-input v-model="form.name" placeholder="姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="stuNo"   >
          <el-input v-model="form.stuNo" placeholder="学号" clearable></el-input>
        </el-form-item>
      </template>
    </my-table>
    </el-card>
  </div>
</template>

<script>
  import myTable from '../../components/myTable.vue';
  export default {
    components: {
      myTable
    },
    data() {
      var xingming = (rule, value, callback) => {
        var re = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
        let reT = /^.{2,10}$/;
        var reF = /^\d+$/;
        if (!re.test(value)) {
          callback(new Error('请输入中文、英文、数字但不包括下划线等符号!'));
        } else if (!reT.test(value)) {
          callback(new Error('姓名至少有2个字符，至多10个字符！'));
        } else if (reF.test(value)) {
          callback(new Error('姓名不能为纯数字'));
        } else {
          callback();
        }
      };
      var yonghu = (rule, value, callback) => {
        var re = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
        let reT = /^.{2,10}$/;
        var reF = /^\d+$/;
        if (!re.test(value)) {
          callback(new Error('请输入中文、英文、数字但不包括下划线等符号!'));
        } else if (!reT.test(value)) {
          callback(new Error('学号至少有2个字符，至多10个字符！'));
        } else {
          callback();
        }
      };
      return {
        fileButt: true,
        bjs: [],
        file: '',
        tableVisible: false,
        size: 'small',
        classId: '',
        labelWidth: '100px',
        urlParam: {},

        cols: [{
            property: 'id',
            label: '序号',
          },
          {
            property: 'name',
            label: '姓名',
          },
          {
            property: 'stuNo',
            label: '学号'
          },
        ],
        tableAttr: {
          border: true
        },
        form: {
          id: '',
          name: '',
          stuNo: '',
        },
        //对话框
        rules: {
          name: [{
            required: true,
            message: '姓名名必填',
            trigger: 'blur'
          },
          {
            validator: xingming,
            trigger: "blur"
          }],
          stuNo: [{
            required: true,
            message: '学号必填',
            trigger: 'blur'
          },
          {
            validator: yonghu,
            trigger: "blur"
          }],
        },

      }
    },
    methods: {
    },
    created() {
      this.$ajax.post('banji/list', {}).then(res => {
        var result = res.data;
        this.bjs = result;
      })
    },
    watch: {
      classId(val) {
        this.tableVisible = false;
        if (val) {
          this.urlParam = {
            classId: val
          };
          this.$nextTick(() => {
            this.tableVisible = true;
          })
        }
      }
    },
    methods: {
    },
  }
</script>

<style scoped>

</style>
